<template>
  <div class="app-container customer-page-box">
    <div class="search">
      <div class="top">
        <p>高级搜索</p>
      </div>
      <div class="bottom">
        <el-form
          ref="queryForm"
          class="cus-search-box"
          :inline="true"
          label-width="100px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="活动编号：" width="300">
                <el-input
                  v-model="form.code"
                  placeholder="请输入活动编号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="渠道来源：">
                <el-select
                  v-model="form.channel"
                  placeholder="请选择渠道来源"
                  clearable
                >
                  <el-option
                    v-for="dict in channelList"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间：">
                <el-date-picker
                  v-model="createDate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="creDate"
                />
              </el-form-item>
              <el-form-item label="活动日期：">
                <el-date-picker
                  v-model="actDate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="actsDate"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item class="search-btn wp-50">
            <el-button
              class="cus-search-btn"
              type="primary"
              @click="search"
            >搜索</el-button>
            <el-button class="cus-reset-btn" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="cus-btn-box">
      <div class="cus-btn-con">
        <el-button
          class="primary-btn"
          @click="openDailog"
        >+ 添加活动</el-button>
      </div>
    </div>

    <div>
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane
            :label="`全部`"
            name="allTable"
          >
            <div>
              <el-table
                ref="table"
                v-loading="isLoading"
                class="cus-table-box"
                stripe
                :data="list"
              >
                <el-table-column
                  label="活动编号"
                  align="center"
                  min-width="80"
                  prop="code"
                />
                <el-table-column
                  label="渠道来源"
                  align="center"
                  min-width="100"
                  prop="channel"
                />
                <el-table-column
                  label="活动名称"
                  align="center"
                  show-overflow-tooltip
                  min-width="120"
                  prop="name"
                />
                <el-table-column
                  label="活动介绍"
                  align="center"
                  min-width="100"
                  prop="info"
                />
                <el-table-column
                  label="活动明细"
                  align="center"
                  min-width="100"
                  prop="detail"
                />
                <el-table-column
                  label="开始时间"
                  align="center"
                  min-width="140"
                  sortable
                  prop="beginTime"
                >
                  <template #default="{row}">
                    {{ startDate(row.beginTime) }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="结束时间"
                  align="center"
                  min-width="140"
                  sortable
                  prop="endTime"
                >
                  <template #default="{row}">
                    {{ startDate(row.endTime) }}
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  align="center"
                  min-width="200"
                  class-name="small-padding fixed-width"
                >
                  <!--  slot-scope="scope" -->
                  <template #default="{row}">
                    <el-button
                      id="bj"
                      size="mini"
                      type="text"
                      @click="editAct(row.id)"
                    >修改</el-button>
                    <el-button
                      id="sc"
                      size="mini"
                      type="text"
                      @click="delAct(row.id)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="page-container">
                <el-pagination
                  background
                  :current-page="Number(form.page)"
                  :page-sizes="[10, 50, 100, 150]"
                  :page-size="Number(form.pageSize)"
                  layout="total, prev, pager, next, sizes"
                  :total="Number(total)"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
              <!-- 添加弹窗 -->
              <addActivitie ref="son3" :visible.sync="visible" @add="getActivityList" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { delactivitiesDataApi, getactivitiesDataApi, getActivityListApi, getQDListApi, getTypeListApi } from '@/api/Activities'
import { Message } from 'element-ui'
import addActivitie from './components/addActivitie.vue'
export default {
  components: {
    addActivitie
  },
  data() {
    return {
      // 加载状态
      isLoading: false,
      total: '',
      list: [],
      activeName: 'allTable',
      // 创建活动
      visible: false,
      createDate: [], // 创建时间
      actDate: [], // 活动时间
      form: {
        page: 1,
        pageSize: 10,
        code: null, // 活动编号
        channel: null, // 渠道来源
        beginCreateTime: null, // 创建开始时间
        endCreateTime: null, // 创建结束时间
        beginTime: null, // 活动开始时间
        endTime: null// 活动结束时间
      },
      channelList: [],
      typeList: []
    }
  },
  created() {
    this.getActivityList()
    this.getQDList()
    this.getTypeList()
  },
  methods: {
    /**
     * 编辑获取回显数据
     */
    async editAct(id) {
      this.visible = true
      this.$refs.son3.channelList = this.channelList
      this.$refs.son3.typeList = this.typeList
      const res = await getactivitiesDataApi(id)
      if (res.code === 500) {
        Message.error('回显数据获取失败！')
        return
      }
      this.$refs.son3.form = res.data
    },
    /**
     * 删除活动
     */
    delAct(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该活动, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delactivitiesDataApi(id)
        if (res.code === 500) {
          Message.error('删除失败！')
          return
        }
        Message.success('删除成功！')
        // 从新调用接口 渲染页面
        this.getActivityList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
     * 开始时间处理
     */
    startDate(val) {
      const res = val ? val.split('T').join('  ') : '--'
      return res
    },
    /**
     * 重置搜索栏
     */
    resetForm() {
      this.actDate = []
      this.createDate = []
      this.form = {
        page: 1,
        pageSize: 10,
        code: null, // 活动编号
        channel: null, // 渠道来源
        beginCreateTime: null, // 创建开始时间
        endCreateTime: null, // 创建结束时间
        beginTime: null, // 活动开始时间
        endTime: null// 活动结束时间
      }
      this.getActivityList()
    },
    /**
     * 创建时间分配
     */
    creDate(val) {
      console.log(val)
      this.form.beginCreateTime = val[0]
      this.form.endCreateTime = val[1]
    },
    /**
     * 活动时间分配
     */
    actsDate(val) {
      this.form.beginTime = val[0]
      this.form.endTime = val[1]
    },
    /**
     * 搜索功能
     */
    search() {
      this.getActivityList()
    },
    /**
     * 添加点击事件
     */
    openDailog() {
      this.visible = true
      this.$refs.son3.channelList = this.channelList
      this.$refs.son3.typeList = this.typeList
    },
    /**
     * 获取状态下拉列表
     */
    async getQDList() {
      const { data } = await getQDListApi()
      this.channelList = data
    },
    /**
     * 获取折扣下拉列表
     */
    async getTypeList() {
      const { data } = await getTypeListApi()
      this.typeList = data
    },
    /**
     * 获取活动列表
     */
    async getActivityList() {
      this.isLoading = true
      const { data } = await getActivityListApi(this.form)
      this.total = data.total
      this.list = data.records
      this.isLoading = false
    },
    /**
     * 关闭弹窗
     */
    colseDailog() {
      this.dialogVisible = false
    },
    /**
     * 切换页
     */
    handleCurrentChange(val) {
      this.form.page = val
      this.getActivityList()
    },
    /**
     * 切换页容量
     */
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getActivityList()
    }
  }
}
</script>
<style scoped lang='scss'>
#bj{
  color: #3366ff;
}
#sc{
  color: red;
}
 ::v-deep .cus-search-box .el-input__inner{
  width: 300px!important;
}
::v-deep .el-form-item__label{
  font-weight: 400;
  color: #333;
}
.top{
  height: 40px;
  line-height: 40px;
  background: #f2f2f2;
  padding-left: 20px;
  border-radius: 5px;
  margin-top: -20px;
  font-weight: 500;
}
.bottom{
  border: 2px solid #f2f2f2;
  padding: 20px 30px 5px 30px;
}
.search-btn{
    text-align: right;
  }
  .wp-50{
    width: 100% !important;
  }
  .cus-btn-box{
    height: 83px;
    line-height: 83px;
    background: #fff;
    .label{
      width: 100px;
      text-align: left;
      font-size: 14px;
      font-weight: 400;
      color: #332929;
      .num{
        font-size: 14px;
        font-weight: 700;
        color: var(--current-color);
      }
    }
    .cus-btn-con{
      flex: 1;
      text-align: left;
      .el-button{
        // width: 132px;
        height: 40px;
        line-height: 40px;
        background: #3366ff;
        border-radius: 20px;
        font-size: 14px;
        color: #FFF;
        padding: 0 30px;
        border: 0;
        margin-left: 20px;
      }
      .primary-btn{
        background: #3366ff;
        color: #ffffff;
        &:hover{
          background: green;
        }
      }
      .default-btn{
        &:hover{
          background: #8DF;
          color: #ffffff;
        }
      }
    }
  }
  .page-container{
    display: flex;
    justify-content: space-between;
    padding:4px 0px;
    text-align: right;
    .txt{
      width: 80px;
      margin-top: 12px;
    }
  }
 ::v-deep .el-dialog__footer{
    text-align: center;
 }
 ::v-deep .el-dialog__footer .el-button{
  padding: 10px 30px;
  border: 1px solid #000;
 }
 ::v-deep .el-dialog__footer .el-button--primary{
  border: none;
 }
 ::v-deep .el-dialog__body p{
  color: #000;
  font-size: 14px;
  padding-left: 136px;
 }
 ::v-deep .el-range-separator{
  width: 30px;
 }
 ::v-deep .el-tabs__item{
  text-align: center;
  border: 2px solid #4770ff;
  width: 100px;
 }
</style>
